<template>
	<!-- 商品分类导航 -->
	<div class="type-nav">
		<div class="container">
			<div @mouseenter="isEnterNav = true" @mouseleave="isEnterNav = false">
				<h2 class="all">全部商品分类</h2>
				<transition name="nav">
					<div
						class="sort"
						@mouseenter="isInCategory = true"
						@mouseleave="leaveCategory"
						@click="navToSearch"
						v-show="navIsShow"
					>
						<div class="all-sort-list2">
							<!-- 一级 -->
							<!-- 使用动态类型控制样式，其实是比动态style控制的方便 -->
							<!-- 做节流: - 给所有列表绑定的mouseenter事件,事件函数都是同一个 -
					我们希望这个事件函数进行节流操作 -
					节流操作之后,不管移入到哪一个列表元素,都要判断这个函数是否到了执行的时机
					-
					因为鼠标移入到列表元素之后,就要发送对应的二级分类列表,所以我们希望节流来执行函数 -->
							<div
								class="item"
								v-for="(category1, index) in categoryList"
								:key="category1.categoryId"
								@mouseenter="mouseEnterThrottleFn(index)"
								:class="isEnterIndex === index ? 'active' : ''"
							>
								<h3>
									<a
										href="javascript:;"
										:data-category1Id="category1.categoryId"
										:data-categoryName="category1.categoryName"
										>{{ category1.categoryName }}</a
									>
								</h3>
								<div class="item-list clearfix">
									<div class="subitem">
										<!-- 二级 -->
										<dl
											class="fore"
											v-for="category2 in category1.categoryChild"
											:key="category2.categoryId"
										>
											<dt>
												<a
													href="javascript:;"
													:data-category2Id="category2.categoryId"
													:data-categoryName="category2.categoryName"
													>{{ category2.categoryName }}</a
												>
											</dt>
											<dd>
												<!-- 三级 -->
												<em
													v-for="category3 in category2.categoryChild"
													:key="category3.categoryId"
												>
													<a
														href="javascript:;"
														:data-category3Id="category3.categoryId"
														:data-categoryName="category3.categoryName"
														>{{ category3.categoryName }}</a
													>
												</em>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>

			<nav class="nav">
				<a href="###">服装城</a>
				<a href="###">美妆馆</a>
				<a href="###">尚品汇超市</a>
				<a href="###">全球购</a>
				<a href="###">闪购</a>
				<a href="###">团购</a>
				<a href="###">有趣</a>
				<a href="###">秒杀</a>
			</nav>
		</div>
	</div>
</template>

<script>
import { throttle } from "lodash";
import { mapState } from "vuex";
export default {
	name: "TypeNav",
	data() {
		return {
			//保存鼠标移入的item
			isEnterIndex: -1,
			//保存鼠标在不在分类区域
			isInCategory: false,
			//保存鼠标在不在整个nav区域
			isEnterNav: false,
		};
	},
	mounted() {
		// //因为TypeNav是公共组件,可能被使用多次,每次使用的时候都会进行组件加载,每次都会重新获取三级分类的数据
		// //我们干脆把请求放在入口文件
		// // //初始化发送三级列表请求
		// this.getCategoryList();

		/* 在初始化的时候,就使用throttle把鼠标移入三级列表的事件函数mouseEnterItem进行节流封装
		实例上我已经预先设置了一个方法,对throttle返回的函数进行占位,得到节流返回的函数,交给事件 */
		this.mouseEnterThrottleFn = throttle(this.mouseEnterItem, 100, {
			leading: true, //指定调用在节流开始前
			trailing: true, //指定调用在节流结束后
		});
	},
	computed: {
		...mapState("category", ["categoryList"]),
		//得到sort下拉列表的是否展示
		navIsShow() {
			//只有在home页的时候默认是显示的,其他情况默认是隐藏的
			if (this.$route.name === "home") return true;

			//如果不是首页,则是否展示nav靠isEnterNav来决定
			return this.isEnterNav;
		},
	},
	methods: {
		// ...mapActions("category", ["getCategoryList"]),

		//1.鼠标移入每一个三级列表后的事件函数(节流之后,这个函数并不是直接使用,而是交给节流函数使用的)
		mouseEnterItem(index) {
			if (!this.isInCategory) return;
			// console.log(index);
			this.isEnterIndex = index;
		},
		//2.设置一个throttle函数的返回值函数的占位
		mouseEnterThrottleFn() {},
		//3.离开三级分类区域的回调函数
		leaveCategory() {
			this.isEnterIndex = -1;
			this.isInCategory = false;
		},
		//三级分类跳转到search页的事件函数
		navToSearch(e) {
			//因为有事件委托,所以先判断当前点击的元素是不是a标签
			if (e.target.nodeName !== "A") return;

			//从e.target元素上获取自定义属性
			const { category1id, category2id, category3id, categoryname } =
				e.target.dataset;

			// console.log(category1id, category2id, category3id, categoryname);
			// 在编程式导航之前,先获取到当前的params参数,然后一起提交
			const params = this.$route.params;
			//编程式路由导航
			this.$router.push({
				name: "search",
				query: {
					category1Id: category1id,
					category2Id: category2id,
					category3Id: category3id,
					categoryName: categoryname,
				},
				params,
			});
		},
	},
	watch: {
		//监听动态路由的改变
		$route() {
			//在search中,我们点击nav中的连接的时候,动态路由的query参数改变了,但是其他没变化,并且nav的窗口也没有隐藏
			//我们需要在点击过以后,让nav隐藏
			this.isEnterNav = false;
		},
	},
};
</script>

<style lang="less" scoped>
.nav-enter,
.nav-leave-to {
	opacity: 0;
}
.nav-enter-active,
.nav-leave-active {
	transition: all 0.3s linear;
}
.type-nav {
	border-bottom: 2px solid #e1251b;

	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		position: relative;

		.all {
			width: 210px;
			height: 45px;
			background-color: #e1251b;
			line-height: 45px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 210px;
			height: 461px;
			position: absolute;
			background: #fafafa;
			z-index: 999;

			.all-sort-list2 {
				.item {
					h3 {
						line-height: 30px;
						font-size: 14px;
						font-weight: 400;
						overflow: hidden;
						padding: 0 20px;
						margin: 0;

						a {
							color: #333;
						}
					}

					.item-list {
						display: none;
						position: absolute;
						width: 734px;
						min-height: 460px;
						background: #f7f7f7;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							float: left;
							width: 650px;
							padding: 0 4px 0 8px;

							dl {
								border-top: 1px solid #eee;
								padding: 6px 0;
								overflow: hidden;
								zoom: 1;

								&.fore {
									border-top: 0;
								}

								dt {
									float: left;
									width: 54px;
									line-height: 22px;
									text-align: right;
									padding: 3px 6px 0 0;
									font-weight: 700;
								}

								dd {
									float: left;
									width: 415px;
									padding: 3px 0 0;
									overflow: hidden;

									em {
										float: left;
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
										border-left: 1px solid #ccc;
									}
								}
							}
						}
					}

					&.active {
						h3 {
							background: rgb(0, 255, 213);
						}
						.item-list {
							display: block;
						}
					}
				}
			}
		}
	}
}
</style>
